<template>
    <!-- 答题进度 -->
    <view class="progress_box">
        <view class="txt">测评进度</view>
        <progress class="progress" active-mode="forwards" border-radius="100" :percent="percent" backgroundColor="#ebebeb"
            stroke-width="10" activeColor="#1c80fb" active />

        <view class="perTxt">
            {{ questionNum }}/{{ questionLen }}
        </view>
    </view>

    <!-- 答题 -->
    <view class="question_box">
        <!-- 标题 -->
        <view class="questionTitle">
            {{ eachQuetion.data.topic }}
        </view>
        <!-- 答题选项 -->
        <view class="question_options">
            <view>单选题</view>
            <view class="questTions_options_box">
                <view @click="selectQuestion(item.son_id)" class="questTions_options_item"
                    v-for="(item, index) in eachQuetion.data.options" :key="item.son_id">
                    {{ item.title }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { reactive, ref, watch } from "vue";
import type { QuestionItem, optionsType } from '@/dataType/data'
import { get_depression_topicsApi, get_premature_topicsApi, get_insomnia_topicsApi } from '@/http/api'


//答题类型
const type = ref('')
//要答的标题
const title = ref('')
//题的数量
const questionLen = ref(0)
//正在答题的题号
const questionNum = ref(1)
//每道题的下标
const questionIndex = ref(0)
//答题进度 百分比
const percent = ref(0)
//答题的数组
const questionArr = ref<QuestionItem[]>([])
//每道题数据
const eachQuetion = reactive<{ data: QuestionItem }>({
    data: {
        topic: "",
        _id: "",
        options: [] as optionsType[]
    }
})

onLoad((e: any) => {

    type.value = e.type;
    title.value = e.title
})

onShow(() => {
    //重置下标
    questionIndex.value = 0;
    //重置题号
    questionNum.value = 1;
    //动态修改页面顶部标题
    uni.setNavigationBarTitle({
        title: title.value,
    })
    //获取答题列表
    getQuestionList()
})

const getQuestionList = async () => {
    let res;
    console.log('类型：：', title.value)
    if (type.value === '001') {
        //调用抑郁症测试接口
        res = await get_depression_topicsApi()
        console.log('抑郁症:', res)


    } else if (type.value === '002') {
        //获取早泄题目
        res = await get_premature_topicsApi()
        console.log('获取早泄题:', res)
    } else if (type.value === '003') {
        //获取失眠题目
        res = await get_insomnia_topicsApi()
        console.log('获取失眠:', res)
    }

    questionArr.value = res?.data.data;
    questionLen.value = res?.data.data.length;
    eachQuetion.data = res?.data.data[questionIndex.value]
    //  percent.value=(100/题数量)*题号
    percent.value = (100 / questionLen.value) * questionNum.value

}

//选中答题项，进入下一题，并将当前选项id存入数组
const selectQuestion = (son_id: string) => {
    questionIndex.value++
    if (questionIndex.value < questionLen.value) {

        questionNum.value++
        eachQuetion.data = questionArr.value[questionIndex.value]
        percent.value = (100 / questionLen.value) * questionNum.value
    }

    console.log(questionIndex.value)
    console.log(questionLen.value)
}

//利用watch监听questionIndex和questionLen变化
watch([questionIndex, questionLen], (newV, oldV) => {
    console.log('newV:', newV)
    const objStr = JSON.stringify({
        type: type.value,
        title: title.value
    })
    if (newV[0] === newV[1]) {
        //跳转去答题结果页面
        uni.navigateTo({
            url: `/pages/question/result?params=${objStr}`
        })
    }
})



</script>

<style lang="scss">
.progress_box {
    display: flex;
    padding: 10px 20rpx;

    .progress {
        flex: 1;
        margin-left: 30rpx;
        margin-right: 30rpx;

    }
}

.questTions_options_item {
    padding: 20rpx;
}
</style>